<template>
  <div class="class-container">
    <van-nav-bar title="班级管理" left-arrow @click-left="$router.back()" />
    
    <div class="class-content">
      <!-- 搜索栏 -->
      <van-search 
        v-model="searchValue" 
        placeholder="搜索班级名称"
        @search="onSearch"
        @clear="onClear"
      />
      
      <!-- 添加按钮 -->
      <van-button 
        type="primary" 
        block 
        class="add-btn"
        @click="showAddDialog = true"
      >
        <van-icon name="plus" /> 添加班级
      </van-button>
      
      <!-- 班级列表 -->
      <van-list
        v-model:loading="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
      >
        <van-card
          v-for="item in classList"
          :key="item.id"
          :title="item.name"
          :desc="`年级: ${item.grade} | 专业: ${item.major} | 人数: ${item.studentCount}人`"
        >
          <template #tags>
            <van-tag type="primary">{{ item.status === 'active' ? '正常' : '停用' }}</van-tag>
          </template>
          <template #footer>
            <van-button size="mini" @click="editClass(item)">编辑</van-button>
            <van-button size="mini" type="danger" @click="deleteClass(item)">删除</van-button>
          </template>
        </van-card>
      </van-list>
    </div>
    
    <!-- 添加/编辑弹窗 -->
    <van-popup 
      v-model:show="showAddDialog" 
      position="bottom" 
      :style="{ height: '60%' }"
      round
      closeable
    >
      <div class="form-container">
        <h3>{{ editingClass ? '编辑班级' : '添加班级' }}</h3>
        <van-form @submit="onSubmit">
          <van-field
            v-model="formData.name"
            name="name"
            label="班级名称"
            placeholder="请输入班级名称"
            :rules="[{ required: true, message: '请输入班级名称' }]"
          />
          <van-field
            v-model="formData.grade"
            name="grade"
            label="年级"
            placeholder="请输入年级"
            :rules="[{ required: true, message: '请输入年级' }]"
          />
          <van-field
            v-model="formData.major"
            name="major"
            label="专业"
            placeholder="请输入专业"
            :rules="[{ required: true, message: '请输入专业' }]"
          />
          <van-field
            v-model="formData.studentCount"
            name="studentCount"
            label="学生人数"
            type="number"
            placeholder="请输入学生人数"
            :rules="[{ required: true, message: '请输入学生人数' }]"
          />
          <van-field name="status" label="状态">
            <template #input>
              <van-radio-group v-model="formData.status" direction="horizontal">
                <van-radio name="active">正常</van-radio>
                <van-radio name="inactive">停用</van-radio>
              </van-radio-group>
            </template>
          </van-field>
          <div class="form-buttons">
            <van-button block type="primary" native-type="submit">
              {{ editingClass ? '更新' : '添加' }}
            </van-button>
          </div>
        </van-form>
      </div>
    </van-popup>
    
    <van-tabbar v-model="activeTab" fixed>
      <van-tabbar-item icon="wap-home-o" to="/dashboard">首页</van-tabbar-item>
      <van-tabbar-item icon="calendar-o" to="/calendar">日历</van-tabbar-item>
      <van-tabbar-item icon="orders-o" to="/schedule">排课</van-tabbar-item>
      <van-tabbar-item icon="manager-o" to="/master/teacher">管理</van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { showToast, showConfirmDialog } from 'vant'

const searchValue = ref('')
const loading = ref(false)
const finished = ref(false)
const classList = ref([])
const showAddDialog = ref(false)
const editingClass = ref(null)
const activeTab = ref(3)

const formData = ref({
  name: '',
  grade: '',
  major: '',
  studentCount: '',
  status: 'active'
})

const onLoad = async () => {
  try {
    // 模拟加载数据
    setTimeout(() => {
      if (classList.value.length === 0) {
        classList.value = [
          { id: 1, name: '计算机1班', grade: '2023级', major: '计算机科学与技术', studentCount: 30, status: 'active' },
          { id: 2, name: '计算机2班', grade: '2023级', major: '计算机科学与技术', studentCount: 28, status: 'active' },
          { id: 3, name: '软件1班', grade: '2023级', major: '软件工程', studentCount: 32, status: 'active' }
        ]
      }
      loading.value = false
      finished.value = true
    }, 1000)
  } catch (error) {
    showToast('加载失败')
    loading.value = false
  }
}

const onSearch = (value) => {
  // 实现搜索逻辑
  console.log('搜索:', value)
}

const onClear = () => {
  searchValue.value = ''
}

const editClass = (item) => {
  editingClass.value = item
  formData.value = { ...item }
  showAddDialog.value = true
}

const deleteClass = async (item) => {
  try {
    await showConfirmDialog({
      title: '确认删除',
      message: `确定要删除班级"${item.name}"吗？`,
    })
    
    // 这里应该调用删除API
    const index = classList.value.findIndex(c => c.id === item.id)
    if (index > -1) {
      classList.value.splice(index, 1)
      showToast('删除成功')
    }
  } catch {
    // 用户取消
  }
}

const onSubmit = async () => {
  try {
    if (editingClass.value) {
      // 编辑
      const index = classList.value.findIndex(c => c.id === editingClass.value.id)
      if (index > -1) {
        classList.value[index] = { ...editingClass.value, ...formData.value }
      }
      showToast('更新成功')
    } else {
      // 添加
      const newClass = {
        id: Date.now(),
        ...formData.value,
        studentCount: parseInt(formData.value.studentCount)
      }
      classList.value.unshift(newClass)
      showToast('添加成功')
    }
    
    showAddDialog.value = false
    resetForm()
  } catch (error) {
    showToast('操作失败')
  }
}

const resetForm = () => {
  formData.value = {
    name: '',
    grade: '',
    major: '',
    studentCount: '',
    status: 'active'
  }
  editingClass.value = null
}

onMounted(() => {
  onLoad()
})
</script>

<style lang="scss" scoped>
.class-container {
  padding-bottom: 50px;
}

.class-content {
  padding: $padding-md;
}

.add-btn {
  margin: $padding-md 0;
  
  .van-icon {
    margin-right: 4px;
  }
}

.van-card {
  margin-bottom: $padding-sm;
  border-radius: $border-radius-md;
  overflow: hidden;
  
  :deep(.van-card__footer) {
    display: flex;
    gap: $padding-xs;
  }
}

.form-container {
  padding: $padding-lg;
  
  h3 {
    text-align: center;
    margin-bottom: $padding-lg;
    color: $text-color;
  }
}

.form-buttons {
  margin-top: $padding-lg;
}
</style>